<template>
	<div class="video-box">
		<ul class="video-content">
			<li v-for="(value, index) in list" :key="index">
				<img :src="value.img" />
				<p>{{ value.title }}</p>
				<div class="meta">
					<span class="time">{{ value.time }}</span>
					<span class="writer">{{ value.writer }}</span>
				</div>
				<div class="xiaobiao">
					<div class="tu"></div>
					<div class="shijian">
						<span class="shi">2:05:41</span>
					</div>
				</div>
			</li>
		</ul>
	</div>
</template>

<style lang="scss" scoped>
* {
	margin: 0;
	padding: 0;
}
.video-box {
	width: 100%;
	height: 1000px;
	.video-content {
		width: 1290px;
		height: 1000px;
		margin-left: 11%;
		list-style: none;

		li {
			width: 227px;
			height: 264px;
			float: left;
			border-radius: 6px;
			position: relative;
			margin: 12px 14px;
			border: 1px solid #999;
			img {
				width: 227px;
				height: 126px;
				border-top-left-radius: 6px;
				border-top-right-radius: 6px;
			}
			.xiaobiao {
				width: 81px;
				height: 18px;

				position: absolute;
				top: 100px;
				left: 140px;

				.shijian {
					width: 53px;
					height: 18px;
					float: left;
					margin-left: 5px;
					background: black;

					.shi {
						font-size: 12px;
						display: block;
						font-weight: 700;
						color: white;
						text-align: center;
						line-height: 18px;
					}
				}
				.tu {
					width: 23px;
					height: 18px;
					background-color: black;
					background: url('./img/(2).png') no-repeat;
					background-position-x: -214px;
					background-position-y: -35px;
					background-size: 417px;
					float: left;
				}
			}
			p {
				font-weight: 700;
				font-size: 13px;
				margin-left: 8%;
				margin-top: 3%;
			}
			.meta {
				width: 200px;
				height: 30px;

				margin-top: 26%;
				.time {
					display: block;
					font-size: 11px;
					margin-left: 8%;
				}
				.writer {
					display: block;
					font-size: 11px;
					margin-left: 8%;
					margin-top: 2px;
				}
			}
		}
	}
}
</style>
<script>
export default {
	data() {
		return {
			list: [
				{
					img: require('../0817work/img/(1).png'),
					title: 'Vue js 3的动画和过渡',
					time: '已浏览3次 · 18小时前',
					writer: 'bilibili.com南风渐暖__',
				},
				{
					img: require('../0817work/img/th.png'),
					title: 'Vue js 3的动画和过渡',
					time: '已浏览3次 · 18小时前',
					writer: 'bilibili.com南风渐暖__',
				},
				{
					img: require('../0817work/img/th (1).png'),
					title: 'Vue js 3的动画和过渡',
					time: '已浏览3次 · 18小时前',
					writer: 'bilibili.com南风渐暖__',
				},
				{
					img: require('../0817work/img/th (1).png'),
					title: 'Vue js 3的动画和过渡',
					time: '已浏览3次 · 18小时前',
					writer: 'bilibili.com南风渐暖__',
				},
				{
					img: require('../0817work/img/th (2).png'),
					title: 'Vue js 3的动画和过渡',
					time: '已浏览3次 · 18小时前',
					writer: 'bilibili.com南风渐暖__',
				},
				{
					img: require('../0817work/img/th (3).png'),
					title: 'Vue js 3的动画和过渡',
					time: '已浏览3次 · 18小时前',
					writer: 'bilibili.com南风渐暖__',
				},
				{
					img: require('../0817work/img/th (4).png'),
					title: 'Vue js 3的动画和过渡',
					time: '已浏览3次 · 18小时前',
					writer: 'bilibili.com南风渐暖__',
				},
				{
					img: require('../0817work/img/th (5).png'),
					title: 'Vue js 3的动画和过渡',
					time: '已浏览3次 · 18小时前',
					writer: 'bilibili.com南风渐暖__',
				},
				{
					img: require('../0817work/img/th (6).png'),
					title: 'Vue js 3的动画和过渡',
					time: '已浏览3次 · 18小时前',
					writer: 'bilibili.com南风渐暖__',
				},
				{
					img: require('../0817work/img/th (7).png'),
					title: 'Vue js 3的动画和过渡',
					time: '已浏览3次 · 18小时前',
					writer: 'bilibili.com南风渐暖__',
				},
			],
		}
	},
}
</script>
